package com.addzero.web.ui.components.drawer

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.Icons.Filled
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.outlined.Description
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.addzero.Route
import java.nio.charset.StandardCharsets.UTF_8

/**
 * 上传抽屉测试组件
 */
@Composable
@Route
fun UploadDrawerTestRoute() {
    Column(modifier = Modifier.fillMaxSize()) {
        // 四个方向的抽屉测试
        var selectedDirection by remember { mutableStateOf(DrawerDirection.TOP) }
        val viewModel = remember {
            val value = UseUploadDrawer(selectedDirection)
            mutableStateOf(value)
        }
            viewModel.value = UseUploadDrawer(DrawerDirection.TOP)
        // 监听上传结果
        var uploadedFiles by remember<MutableState<List<Pair<String, String>>>> { mutableStateOf(emptyList()) }
        LaunchedEffect(viewModel.value.uploadResult) {
            viewModel.value.uploadResult?.let { result ->
                // 转换上传结果为可显示格式
                uploadedFiles = result.files.map { file ->
                    try {
                        file.name to String(file.content, UTF_8).take(500) +
                                if (file.content.size > 500) "..." else ""
                    } catch (e: Exception) {
                        file.name to "[非文本文件]"
                    }
                }
            }
        }
        Box(modifier = Modifier.fillMaxSize()) {
            // 显示方向选择和测试内容
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(32.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    "选择抽屉方向",
                    style = MaterialTheme.typography.headlineSmall
                )

                Spacer(modifier = Modifier.height(16.dp))

                // 方向选择按钮
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceEvenly
                ) {
                    DrawerDirection.values().forEach { direction ->
                        Button(
                            onClick = { selectedDirection = direction },
                            colors = ButtonDefaults.buttonColors(
                                containerColor = if (selectedDirection == direction)
                                    MaterialTheme.colorScheme.primary
                                else
                                    MaterialTheme.colorScheme.secondary
                            )
                        ) {
                            Text(direction.name)
                        }
                    }
                }

                Spacer(modifier = Modifier.height(32.dp))

                if (uploadedFiles.isNotEmpty()) {
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(400.dp)
                            .padding(16.dp),
                        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
                    ) {
                        Column(
                            modifier = Modifier
                                .fillMaxSize()
                                .padding(16.dp)
                        ) {
                            Row(
                                verticalAlignment = Alignment.CenterVertically,
                                modifier = Modifier.padding(bottom = 8.dp)
                            ) {
                                Icon(
                                    imageVector = Filled.Check,
                                    contentDescription = "成功",
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Spacer(modifier = Modifier.width(8.dp))
                                Text(
                                    "上传成功 (${uploadedFiles.size} 个文件)",
                                    style = MaterialTheme.typography.headlineSmall,
                                    color = MaterialTheme.colorScheme.primary
                                )
                            }

                            Divider()
                            Spacer(modifier = Modifier.height(8.dp))

                            // 文件列表


//                            DropdownList()


                            LazyColumn(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .weight(1f)
                            ) {
                                items(uploadedFiles) { (name, content) ->
                                    UploadedFileItem(name, content)
                                    Divider(modifier = Modifier.padding(vertical = 8.dp))
                                }
                            }

                            Spacer(modifier = Modifier.height(16.dp))

                            Button(
                                onClick = {
                                    uploadedFiles = emptyList()
                                    viewModel.value.clearSelection()
                                },
                                modifier = Modifier.align(Alignment.End)
                            ) {
                                Text("清除")
                            }
                        }
                    }
                } else {
                    Text(
                        "当前方向: ${selectedDirection.name}",
                        style = MaterialTheme.typography.bodyLarge
                    )

                    Spacer(modifier = Modifier.height(16.dp))

                    Button(
                        onClick = { viewModel.value.toggleDrawer() }
                    ) {
                        Text("打开上传抽屉")
                    }

                    Text(
                        "也可以拖拽屏幕边缘打开抽屉",
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        modifier = Modifier.padding(top = 8.dp)
                    )
                }
            }

            // 渲染抽屉
            viewModel.value.render()
        }
    }
}

/**
 * 上传文件项目组件
 */
@Composable
private fun UploadedFileItem(name: String, content: String) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(
                imageVector = Icons.Outlined.Description,
                contentDescription = "文件",
                tint = MaterialTheme.colorScheme.primary
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }

        Spacer(modifier = Modifier.height(8.dp))

        Surface(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .padding(start = 32.dp),
            color = MaterialTheme.colorScheme.surfaceVariant,
            shape = MaterialTheme.shapes.small
        ) {
            Text(
                text = content,
                modifier = Modifier.padding(8.dp),
                style = MaterialTheme.typography.bodySmall
            )
        }
    }
}
